<template>
  <div>
    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
      <template #toolbar>
        <a-button
          type="primary"
          @click="handleCreate"
          v-if="hasPermission(['system:project:create'])"
        >
          新增
        </a-button>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              icon: 'clarity:note-edit-line',
              onClick: handleEdit.bind(null, record),
              ifShow: hasPermission(['system:project:update']),
            },

            {
              label: !record.isDisabled ? '启用' : '禁用',
              icon: !record.isDisabled
                ? 'mdi:success-circle-outline'
                : 'icon-park-outline:remind-disable',
              ifShow: hasPermission(['system:project:delete']),
              color: !record.isDisabled ? 'success' : 'error',
              popConfirm: {
                title: !record.isDisabled ? '是否确认禁用' : '是否确认启用',
                confirm: handleDisabel.bind(null, record),
              },
            },
            {
              label: record.topped ? '置顶中' : '置顶',
              icon: 'bxs:to-top',
              color: record.topped ? 'success' : '',
              ifShow: hasPermission(['system:project:update']),
              popConfirm: {
                title: '是否确认置顶',
                confirm: handleTopping.bind(null, record),
              },
            },
          ]"
          :dropDownActions="[
            {
              label: '详情',
              icon: 'ph:eye',
              onClick: handleDetail.bind(null, record),
              ifShow: hasPermission(['system:project:query']),
            },
            {
              label: '关联人员',
              icon: 'mdi:users-add-outline',
              onClick: handleUser.bind(null, record),
              ifShow: hasPermission(['system:distinct:query']),
            },
          ]"
        />
      </template>
    </BasicTable>
    <Drawer @register="registerDrawer" @success="handleSuccess" :type="type" />
    <UserDrawer
      @register="registerUserDrawer"
      @success="addUser"
      :type="userType"
      :projectId="projectId"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, reactive, toRefs } from 'vue';
import { BasicTable, useTable, TableAction } from '/@/components/Table';
import {
  projectpage,
  projectcreate,
  projectUpdate,
  projectDisable,
  projectTop,
} from '/@/api/backs/projectsManagement/projectsManagement';
import { userProjectAdd } from '/@/api/backs/projectsManagement/userProject';
import { useDrawer } from '/@/components/Drawer';
import Drawer from './components/Drawer.vue';
import UserDrawer from './components/UserDrawer.vue';
import { usePermission } from '/@/hooks/web/usePermission';
import { columns, searchFormSchema } from './components/tableData';
import { message } from 'ant-design-vue';
import { useGo } from '/@/hooks/web/usePage';
export default defineComponent({
  name: 'Project',
  components: { BasicTable, Drawer, TableAction, UserDrawer },
  setup() {
    const go = useGo();
    const { hasPermission } = usePermission();
    const [registerDrawer, { openDrawer, closeDrawer }] = useDrawer();
    const [registerUserDrawer, { openDrawer: openUserDrawer, closeDrawer: closeUserDrawer }] =
      useDrawer();
    const [registerTable, { reload }] = useTable({
      title: '项目列表',
      api: projectpage,
      columns,
      formConfig: {
        labelWidth: 100,
        schemas: searchFormSchema,
      },
      isTreeTable: false,
      pagination: true,
      striped: false,
      useSearchForm: true,
      showTableSetting: true,
      bordered: true,
      showIndexColumn: false,
      canResize: true,
      actionColumn: {
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
        width: 300,
      },
    });
    const data: any = reactive({
      type: 'add',
      userType: 'add',
      projectId: null,
    });
    //编辑
    const handleEditSuccess = async (formData) => {
      let params = { ...formData };
      try {
        await projectUpdate(params);
        closeDrawer();
        reload();
        message.success('操作成功！');
      } catch (error) {}
    };
    //新增
    const handleAddSuccess = async (formData) => {
      let params = { ...formData };
      try {
        // return
        await projectcreate(params);
        closeDrawer();
        reload();
        message.success('操作成功！');
      } catch (error) {}
    };
    function handleCreate() {
      openDrawer(true, {
        isUpdate: false,
      });
      data.type = 'add';
    }

    function handleEdit(record: Recordable) {
      openDrawer(true, {
        record,
        isUpdate: true,
      });
      data.type = 'edit';
    }
    function handleUser(record: Recordable) {
      openUserDrawer(true, {
        record,
        isUpdate: false,
      });
      data.projectId = record.id;
    }
    async function addUser(formData) {
      let params = { ...formData };
      try {
        await userProjectAdd(params);
        closeUserDrawer();
        message.success('操作成功！');
        reload();
      } catch (error) {}
    }
    function handleDetail(record: Recordable) {
      go('/projectsManagement/projectDetail/' + record.id);
    }
    function handleDisabel(record: Recordable) {
      projectDisable({ id: record.id }).then((res) => {
        if (res) {
          message.success('操作成功！');
          reload();
        }
      });
    }
    //置顶
    function handleTopping(record: Recordable) {
      projectTop({ id: record.id }).then((res) => {
        if (res) {
          message.success('置顶成功！');
          reload();
        }
      });
    }

    function handleSuccess(formData) {
      switch (data.type) {
        case 'add':
          handleAddSuccess(formData);
          break;
        case 'edit':
          handleEditSuccess(formData);
          break;
      }
    }

    function onFetchSuccess() {
      // 演示默认展开所有表项
      // nextTick(expandAll);
    }

    return {
      ...toRefs(data),
      registerTable,
      registerDrawer,
      registerUserDrawer,
      handleCreate,
      handleEdit,
      handleUser,
      handleDisabel,
      handleTopping,
      handleDetail,
      handleSuccess,
      onFetchSuccess,
      hasPermission,
      addUser,
    };
  },
});
</script>
